<template>
    <!-- header -->
    <n-layout class="wrapper" id="content-wrapper">
        <n-layout-header>
            <header class="head">
                <section class="search">
                    <div class="searchCon">
                        <i class="iconfont icon-sousuo"></i>
                        <span>香港航班恢复正常 | 香港航班恢复正常 | 香港航班恢复正常</span>
                    </div>
                </section>
                <nav class="head_lists">
                    <div class="lists_con">
                        <ul>
                            <li><a href="#">关注</a></li>
                            <li class="bingo"><a href="#">推荐</a></li>
                            <li><a href="#">热点</a></li>
                            <li><a href="#">西安</a></li>
                            <li><a href="#">视频</a></li>
                            <li><a href="#">小视频</a></li>
                            <li><a href="#">关注</a></li>
                            <li><a href="#">关注</a></li>
                            <li><a href="#">关注</a></li>
                        </ul>
                    </div>
                    <div class="list_icon">
                        <i class="iconfont icon-liebiao"></i>
                    </div>
                </nav>
            </header>
        </n-layout-header>
        <n-layout-content style="height:calc(100% - 1.6rem);overflow:auto;">
            <!-- container -->
            <section class="container">
                 <NewsItem v-for="(item,index) in data" :key="index" :itemData="item"></NewsItem>
            </section>
        </n-layout-content>
    </n-layout>

</template>
<script setup lang="ts">
import { computed, onMounted,ref } from 'vue';
import { storeToRefs } from 'pinia';  
  import {useMainStore}  from '@/store/index';
import NewsItem from '../components/NewsItem.vue';

import HomeData from '../../mockdata/home.json'
 
const data = ref([]) 

  onMounted(()=>{  
    //加载数据
    HomeData.forEach((e,index)=>{
        data.value.push(e)
    })
   
  })


</script>
<style>
.wrapper{
    height: 100%;
}
</style>